<template>
  <div>
    <a-modal
      :title="isEditor ? '编辑成品' : '新增成品'"
      :visible="visible"
      okText="确定"
      cancelText="取消"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="clearAll"
    >
      <div>
        <a-row
          type="flex"
          justify="space-around"
          align="middle"
          style="margin-bottom: 10px"
        >
          <a-col :span="4">成品名称</a-col>
          <a-col :span="20">
            <a-input
              v-model:value="apiForm.productName"
              placeholder="成品名称"
              allow-clear
            />
          </a-col>
        </a-row>

        <a-row
          type="flex"
          justify="space-around"
          align="middle"
          style="margin-bottom: 10px"
        >
          <a-col :span="4">成品价格</a-col>
          <a-col :span="20">
            <a-input-number
              placeholder="成品价格"
              allow-clear
              v-model:value="apiForm.productPrice"
            />
          </a-col>
        </a-row>

        <a-row type="flex" justify="space-around" align="middle">
          <a-col :span="4">成品图片</a-col>
          <a-col :span="20">
            <upload
              :maxNum="1"
              @imags="getImages"
              :hasAvatar="apiForm.productImage"
            />
          </a-col>
        </a-row>

        <a-row
          type="flex"
          justify="space-around"
          align="middle"
          style="margin-bottom: 10px"
        >
          <a-col :span="4">原材料</a-col>
          <a-col :span="20">
            <a-input-group
              compact
              style="margin-bottom: 5px"
              v-for="(item, index) in apiForm.originalProductList"
              :key="index"
            >
              <a-input
                :placeholder="`原料${index + 1}`"
                disabled
                style="margin-right: 5px; width: 70px"
              />
              <a-select v-model:value="item.productId" style="width: 40%">
                <a-select-option
                  :value="item.id"
                  v-for="(item, index) in materialsList"
                  :key="index"
                >
                  {{ item.productName }}
                </a-select-option>
              </a-select>
              <a-input-number
                placeholder="该原料数量"
                allow-clear
                style="width: 80px; margin-left: 5px"
                v-model:value="apiForm.originalProductList[index].productNum"
              />
              <a-button
                type="primary"
                shape="circle"
                ghost
                @click="addNewMaterial"
                v-if="index == apiForm.originalProductList.length - 1"
                style="width: 10%; margin-left: 5px"
              >
                <i class="iconfont icon-21"></i>
              </a-button>
            </a-input-group>
          </a-col>
        </a-row>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { getManagerList } from '@/api/materials'
import { newEndProduct, modifiyEndProduct } from '@/api/endProduct'
import Upload from '@/views/common/upload'

export default {
  components: {
    Upload,
  },
  data() {
    return {
      // apiData
      apiForm: {
        productName: '',
        productPrice: 0,
        productImage: '',
        // 原料list
        originalProductList: [
          {
            productId: '',
            productNum: 0,
          },
        ],
      },
      // 提交加载
      confirmLoading: false,
      // 弹窗开关
      visible: false,
      // 所有原料list 做下拉选择
      materialsList: [],
      // 是否是编辑
      isEditor: false,
    }
  },
  created() {
    this.getMartialsList()
  },
  methods: {
    handleOk() {
      // 添加
      if (this.jugeFormDataHasWrite() && !this.isEditor) {
        this.confirmLoading = true
        this.addNewProduct()
        return
      }

      // 修改
      if (this.jugeFormDataHasWrite() && this.isEditor) {
        this.confirmLoading = true
        this.modifiyProduct()
        return
      }
    },
    /**
     * 修改成品信息
     */
    modifiyProduct() {
      // this.apiForm.endProductMapList = []
      // this.apiForm.originalProductList.map(v => {
      //   this.apiForm.endProductMapList.push({
      //     productMapId:v.productId,
      //     productNum:v.productNum,
      //   })
      // })
      this.apiForm.endProductMapList = this.apiForm.originalProductList
      modifiyEndProduct(this.apiForm).then((res) => {
        this.$message.success('修改成功')
        this.$parent.getProductList()
        this.clearAll()
      })
    },
    /**
     * 添加新的成品
     */
    addNewProduct() {
      newEndProduct(this.apiForm).then((res) => {
        this.$message.success('添加成功')
        this.$parent.getProductList()
        this.clearAll()
      })
    },
    /**
     * 判断是否表单数据都填写了
     */
    jugeFormDataHasWrite() {
      if (this.apiForm.srName === '') {
        this.$message.error('请填写仓库名')
        return false
      }
      if (
        this.apiForm.srSize === 0 ||
        this.apiForm.srSize === '' ||
        this.apiForm.srSize === null
      ) {
        this.$message.error('请填写仓库容量')
        return false
      }
      if (this.apiForm.srSite === '') {
        this.$message.error('请填写仓库所在位置')
        return false
      }
      return true
    },
    clearAll() {
      this.visible = false
      this.confirmLoading = false
      this.isEditor = false
      this.apiForm = Object.assign({
        productName: '',
        productPrice: 0,
        productImage: '',
        // 原料list
        originalProductList: [
          {
            productId: '',
            productNum: 0,
          },
        ],
      })
    },
    /**
     * 添加一个多得原材料
     */
    addNewMaterial() {
      // 判断上一个 物料是否填写
      var list = this.apiForm.originalProductList
      var length = list.length
      if (
        list[length - 1].productNum == '' &&
        list[length - 1].productId == 0
      ) {
        this.$message.error('请先填写原材料' + length + '信息')
        return
      }
      this.apiForm.originalProductList.push({
        productId: '',
        productNum: 0,
      })
    },
    /**
     * 获取物料列表
     */
    getMartialsList() {
      var ApiData = {
        pageNum: 1,
        pageSize: 10000,
        type: '0',
      }
      getManagerList(ApiData).then((res) => {
        this.materialsList = res.queryResult.list
      })
    },
    /**
     * 图片上传
     */
    getImages(imgs) {
      if (imgs.length > 0) {
        //   物料只传一张图片  只需要获取第一个
        this.apiForm.productImage = imgs.filter(
          (img) => img.status == 'done'
        )[0].response.picUrl
      } else {
        this.apiForm.productImage = ''
      }
    },
  },
}
</script>